【前端作品常見小錯誤】
學習新技能的過程中除了掌握技能外
更想完成具水準的前端作品
而作品中如果有些小缺陷，累積起來就會讓整體水準下降
我清楚有許多學員並非具有 “設計背景”
所以本篇並非要介紹美的做法
而是要大家避開「不美觀」的常見問題
事先注意許多小問題，將會發現做出好作品不難
### 文字
文字是用來傳遞訊息的，清晰傳達是他的用途
- 字體僅有使用微軟正黑體
→ 行動裝置或其它作業系統是沒有此字體的
- 整體字體太小或太大
→ 太大會影響精緻度，設計上會較難掌控；太小則是影響閱讀性
- 標點符號運用錯誤
→ 請不要混用半形標點符號在全形文章內。ex: 我的,好朋友
- 文字色彩辨識度不足
→ 網頁是用來傳遞資訊的媒介，辨識度不足則會影響此媒介的功效
可參考：https://wcc723.github.io/design/2018/10/22/accessibility/
.
### 動態
動態是給予用戶當前操作的最好提示
- 啟用的選單連結缺少 "啟用" 的視覺效果
→ 讓用戶了解目前的位置
- 非同步行為進行中的視覺效果（讀取、進行中...）
→ 用戶會不清楚目前的操作是否有作用
.
### 色彩
色彩單純，就是最好的顏色搭配
- 網頁色彩過於混亂
→ 色彩越少，畫面越容易掌控，太多色彩容易讓作品失焦
可參考：https://wcc723.github.io/design/2018/10/21/color/
.
### 圖片
好品質的圖片讓網站好品質
- 變形
→ 圖片比例與原圖不同時，會讓人感覺作品粗糙，對於執行者來說也是不細膩的表現
- 檔案太大
→ 避免將過大的圖片直接呈現於畫面上，除了會影響下載速率外，也會讓畫面的呈現效能變差
- 檔案品質不佳
→ 會直接降低網站的水平
- 圖片內的文字變形→ 同 “圖片變形”
.
### 排版
畫面整齊，是最好控制的美
- 網站沒有依據格線排版
→ 不整齊，是最難控制的排版方式
- 行動版出現水平捲軸
→ 代表有內容超出畫面了！
以上簡單介紹常見的美觀問題
接下來將會安排時間補上示意圖
Search